<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>公安机关-登录页面</title>
		<link rel="stylesheet" href="./Bootstrap4.6.1/css/bootstrap.css">
		<script src="./Bootstrap4.6.1/js/jquery.js"></script>
		<script src="./Bootstrap4.6.1/js/bootstrap.bundle.js"></script>
		<style>
			div{
				outline: 1px red solid;
			}
			/* 顶部样式 */
			.top .sousuo {
				margin-top: 0.5rem;
				margin-right: 1rem;
				text-align: right;
				
			}
			.top .sousuo > input{
				border: 1px #d6d6d6 solid;
				height: 2rem;
				border-radius: 5px;
			}
			/* 获取焦点的样式 */
			.top .sousuo > input:focus{
				outline: 2px #d6d6d6 solid;
			}
			.top .nav01{
				text-align: right;
			}
			.top .nav01 a{
				text-decoration: none;
				margin-left: 0.5rem;
			}
			/* 中间部分 */
			.main{
				background: url("./img/gongan/adbg.png") no-repeat;
				background-size: 100% 100%;
			}
			.main .wangluo{
				margin-left: 3rem;
			}
			.main .beian{
				text-align: right;
				margin-top: 2rem;
				margin-bottom: 2rem;
			}
			
			.main .main-right{
				display: flex;
				/* 左右居中 */
				justify-content: center;
				/* 上下居中 */
				align-items: center;
			}
			.main .main-form{
				width: 500px;
				background-color: white;
			}
		</style>
	</head>
	<body>
		<div class="container top">
			<div class="row">
				<div class="col-3">
					<img class="img-fluid" src="./img/gongan/logo.png" alt="">
				</div>
				<div class="col-6 offset-3">
					<div class="sousuo">
						<input type="text" placeholder="请输入要搜索的内容">
						<button class="btn btn-success">搜索</button>
					</div>
					<div class="nav01">
						<a href="">首页</a>
						<a href="">公共查询</a>
						<a href="">公共查询</a>
						<a href="">公共查询</a>
						<a href="">公共查询</a>
						<a href="">公共查询</a>
						<a href="">公共查询</a>
					</div>
				</div>
				
			</div>
		</div>
		<div class="container-fluid main">
			<div class="row">
				<div class="col-6">
					<div class="wangluo">
						<img src="./img/gongan/xcy.png" alt="">
					</div>
					<div class="beian">
						<img src="./img/gongan/liucheng.png" alt="">
					</div>
				</div>
				<div class="col-6 main-right">
					<form action="" class="main-form">
						<div>普通用户</div>
						<div>
							<label for="">用户名:</label>
							<input type="text" name="" id="">
						</div>
						<div>
							<label for="">密码:</label>
							<input type="password" name="" id="">
						</div>
						<div>
							<input type="checkbox" name="" id="">
							<label for="">记住密码</label>
						</div>
						<div>
							<input type="submit" value="登录">
						</div>
						<div>
							<a href="">没有账号？注册</a>
						</div>
					</form>
				</div>
			</div>
		</div>
		<div class="container-fluid bottom">
			
		</div>
	</body>
</html>